<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table border="1">
    <tr>
        <td>
            名字:
        </td>
        <td>
            {{person.name}}
        </td>
    </tr>
    <tr>
        <td>
            照片:
        </td>
        <td>
            <img :src="person.url">
        </td>
    </tr>
    <tr>
        <td>
            年龄:
        </td>
        <td>
            {{person.age}}
        </td>
    </tr>
    <tr>
        <td>
            工作:
        </td>
        <td>
            {{person.job}}
        </td>
    </tr>
    <tr>
        <td>
            好友:
        </td>
        <td>
            <ul>
                <li v-for="name in person.friends">{{name}}</li>
            </ul>
        </td>
    </tr>
    <tr>
        <td colspan="2">
            <input type="button" value="加载数据" @click="f()">
        </td>
    </tr>
</table>
<!--引入VUE-->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    let v = new Vue({
        el:"table",
        data:{
            person:{}
        },

        methods:{
            f:function () {
                //模拟从服务器请求到的服务器
                v.person={
                    name:"刘德华",
                    age:18,
                    url:"../b.jpg",
                    job:"歌手",
                    friends:["张学友","古天乐","郭富城"]
                }
            }
        }
    })
</script>
</body>
</html>